<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CSS引入 -->
	</head>
	<body>
		<div id="app">
			<!-- 显示数据，双大括号，行内写法，胡子语法mustache -->
			{{message}}
			<p v-once>{{message}}</p>
			<p v-html="html"></p>
			<p v-text="html"></p>
		</div>
		{{message}}
		<hr noshade size="3px" width="100%" align="center" color="gray"/>
		<div id="demo">
			<a v-bind:href="href">***百度一下***</a>
			<br>
			<!-- 简写方式:属性名   语法糖-->
			vue指令:<input type="checkbox" :disabled="disabled"/>
			<br>
			<!-- 请使用js和jquery来控制checkbox的选中 -->
			使用JS:<input type="checkbox" id="box" />
			<hr noshade size="3px" width="100%" align="center" color="gray"/>
			<p v-if="seen">现在你看到我了</p>
		</div>
		
		<!-- js引入建议放在body最后 -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			// 获取checkbox元素
			var box=document.getElementById("box");      
			box.checked=true;
			box.disabled=false;
			
			let app = new Vue({
				el:'#app',
				data:{
					message:'hello vue!',
					html:'<a href="http://www.baidu.com">百度一下</a>'
				}
			})
			
			let demo = new Vue({
				el:'#demo',
				data:{
					href:'http://www.baidu.com',
					disabled:true,
					seen:true
				}
			})
			
		</script>
	</body>
</html>
